<template>
  <div>
    <el-container>
      <el-header class="header" height="36px">
        <page_title />
        <div class="aside-box">
          <el-button class="button" color="#53BEC9" @click="handleAdd">新增</el-button>
          <el-input class="input" v-model="searchContent" placeholder="搜索" @change="getStoreList" clearable>
            <template #prefix>
              <i class="iconfont icon-search" />
            </template>
          </el-input>
        </div>
      </el-header>

      <el-main class="main-box">
        <el-table :data="storeData" highlight-current-row style="width: 100%" :row-style="{ height: '9vh' }">
          <el-table-column property="name" label="店铺封面" width="120" align="center">
            <template #default="{ row }">
              <el-image v-if="row.image" style="width: 42px; height: 42px;" :src="getImageUrl(row.image)" />
              <el-image v-else style="width: 42px; height: 42px;" src="/public/logo.png" />
            </template>
          </el-table-column>
          <el-table-column property="name" label="店铺名称" width="200" align="center" />
          <el-table-column property="address" label="店铺地址" show-overflow-tooltip align="center" />
          <el-table-column property="contact" label="联系电话" width="140" align="center" />
          <el-table-column property="hours" label="营业时间" width="120" align="center" />
          <el-table-column property="status" label="状态" width="120" align="center">
            <template #default="{ row }">
              <el-tag v-if="row.status === 1" type="success">营业中</el-tag>
              <el-tag v-else type="info">休息中</el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="240" align="center">
            <template #default="{ row }">
              <div class="operation-box">
                <el-button class="operation-button" @click="handleEnter(row)">
                  <i class="iconfont icon-entry" />
                  <span>进入店铺</span>
                </el-button>
                <div class="operation" @click="handleEdit(row)">
                  <i class="iconfont icon-edit" />
                </div>
                <el-popconfirm placement="top" width="100" confirm-button-text="确定" cancel-button-text="取消"
                  :hide-after="50" hide-icon title="要删除该商店吗？" @confirm="handleDelete(row.id)">
                  <template #reference>
                    <div class="operation">
                      <i class="iconfont icon-delete" />
                    </div>
                  </template>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="dataTotal" :size="pageSize" :current="pageNo" @change="handlePageChange" />
      </el-main>
    </el-container>

    <div class="dialog-box">
      <el-dialog v-model="formDialogVisible" :title="formTitle" width="50%" top="10vh" center draggable>
        <el-form ref="formRef" label-width="auto" :model="formData" :rules="checkForm">
          <el-form-item label="店铺封面">
            <el-upload class="upload-container" :show-file-list="false" :http-request="uploadSectionFile">
              <el-image v-if="formData.image" :src="getImageUrl(formData.image)" class="avatar" />
              <i v-else class="iconfont icon-plus icon" />
            </el-upload>
          </el-form-item>
          <el-form-item label="店铺名称">
            <el-input v-model="formData.name" placeholder="请输入店铺名称" clearable />
          </el-form-item>
          <el-form-item label="店铺地址">
            <el-input v-model="formData.address" placeholder="请输入店铺地址" clearable />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="formData.contact" placeholder="请输入联系方式" clearable />
          </el-form-item>
          <el-form-item label="营业时间">
            <el-time-picker v-model="formData.time" is-range range-separator="~" @change="handleTime" format='HH:mm'
              value-format='HH:mm' start-placeholder="请选择营业时间" end-placeholder="请选择打烊时间" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="formData.status" placeholder="选择状态" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="footer">
            <el-button @click="formDialogVisible = false">取消</el-button>
            <el-button class="button" color="#53BEC9" @click="submitForm">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getImageUrl } from '@/api/file';
import page_title from '@/components/page_title.vue';
import pagination from '@/components/pagination.vue';
const router = useRouter();

onMounted(() => {
  getStoreList()
})

// 搜索内容
const searchContent = ref('');
const search = () => {
};

// 表格数据相关字段
const storeData = ref([]);
const dataTotal = ref(0);
const pageNo = ref(1);
const pageSize = ref(8);
// 获取数据
import { getStoreListService } from '@/api/store';
const getStoreList = async () => {
  let storeQuery = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    keyWord: searchContent.value
  }
  const res = await getStoreListService(storeQuery)
  if (res.code === 0) {
    storeData.value = res.data.list
    dataTotal.value = parseInt(res.data.total)
  }
}
watch(() => pageNo.value, () => {
  getStoreList()
})

// 表单内容相关
const formTitle = ref('新增')
const formDialogVisible = ref(false)
const formData = ref({})
const options = [
  { value: 1, label: '营业中' },
  { value: 2, label: '休息中' }
]

// 新增
const handleAdd = () => {
  formData.value = {}
  openDialogVisible('add')
}

// 编辑
const handleEdit = (row) => {
  formData.value = JSON.parse(JSON.stringify(row))
  let splitTime = row.hours.split('-')
  formData.value.time = [splitTime[0], splitTime[1]]
  openDialogVisible('edit')
}

// 删除
import { deleteStoreService } from '@/api/store';
const handleDelete = async (id) => {
  const res = await deleteStoreService(id)
  if (res.code === 0) {
    ElMessage.success(res.message)
    getStoreList()
  }
}

// 打开对话框
const openDialogVisible = (type) => {
  if (type === 'add') {
    formTitle.value = '新增'
  } else if (type === 'edit') {
    formTitle.value = '编辑'
  }
  formDialogVisible.value = true
}

// 处理文件
import { uploadFileService } from '@/api/file';
const uploadSectionFile = async (param) => {
  let fileObj = param.file;
  let form = new FormData();
  // 文件对象
  form.append("file", fileObj);
  const res = await uploadFileService(form)
  if (res.code === 0) {
    formData.value.image = res.data
  }
}

// 处理时间
const handleTime = () => {
  formData.value.hours = `${formData.value.time[0]}-${formData.value.time[1]}`
  // console.log(formData.value)
}

// 表单校验规则
const checkForm = ref({
  name: [
    { required: true, message: '请输入店铺名称', trigger: 'change' },
  ],
  address: [
    { required: true, message: '请输入店铺地址', trigger: 'change' },
  ],
  contact: [
    { required: true, message: '请输入联系方式', trigger: 'change' },
  ],
  time: [
    { required: true, message: '请选择营业时间', trigger: 'change' },
  ]
})

// 提交表单
import { addStoreService, updateStoreService } from '@/api/store';
const formRef = ref()
const submitForm = () => {
  formRef.value.validate().then(async () => {
    let res
    if (formTitle.value === '新增') {
      res = await addStoreService(formData.value)
    } else if (formTitle.value === '编辑') {
      res = await updateStoreService(formData.value)
    }
    if (res.code === 0) {
      ElMessage.success(res.message)
      formDialogVisible.value = false
      getStoreList()
    }
  }).catch(() => { })
};

// 分页逻辑处理
const handlePageChange = (page) => {
  pageNo.value = page
};

// 店铺路由跳转
const handleEnter = (row) => {
  router.push('/mall/goods/' + row.id)
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
}

.aside-box {
  display: flex;
  align-items: center;

  .button {
    margin-right: 10px;
    color: #fff;
    border-radius: 6px;
  }

  .input {
    width: 220px;
  }
}

.main-box {
  .operation-box {
    display: flex;
    justify-content: center;
    align-items: center;

    .operation-button {
      padding: 0;
      display: flex;
      align-items: center;
      margin-right: 1vw;
      --el-button-hover-text-color: rgb(39, 53, 86, 0.6);

      .iconfont {
        color: #67cad6;
        font-size: 20px;
        border: 2px solid #67cad6;
        border-radius: 6px;
        background-color: rgb(103, 202, 214, 0.3);
        padding: 1px;
        margin: 0 8px 0 4px;
      }

      span {
        color: rgb(39, 53, 86, 0.6);
        padding-right: 8px;
      }
    }

    .operation {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}

.dialog-box {
  :deep(.el-dialog__body) {
    padding: 0 10%;
  }

  :deep(.el-dialog__footer) {
    display: flex;
    justify-content: center;
  }

  .upload-container {
    :deep(.el-upload) {
      border: 1px dashed #dcdfe6;
      border-radius: 6px;
      cursor: pointer;
      overflow: hidden;
      transition: 0.2s;
    }

    :deep(.el-upload:hover) {
      border-color: #67cad6;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
  }

  .footer {
    width: 40%;
    display: flex;
    justify-content: space-between;

    .button {
      color: #fff;
    }
  }
}
</style>
